<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>查看报表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../lib/pagination/style/pagination.css"/>
    <script src="/js/common/language.js"></script>
    <script type="text/javascript" src="../js/jquery/jquery-1.9.1.js"></script>
    <link href="/lib/budget/styles.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="/css/budget/viewReport.css"/>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/Highcharts-5.0.14/code/highcharts.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/data.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/drilldown.js"></script>
    <style>
        .clearfix{
            padding-top: 44px;
            margin-top:0px;
        }
        input[type="text"]{
            width:120px;
            height:24px;
            border-radius:6px ;
            border: 1px solid rgb(221, 221, 221);
            outline: none;
            line-height:24px;
            padding-left:2px;
        }
        .sj{
            top: 10px;
            right: 9px;
        }
        #ulList{
            display: none;
            position: absolute;
            left: 0px;
            top: 24px;
            border: 1px solid #eee;
            background: #fff;
            z-index: 10;
            width: 600px;
            height: 400px;
            overflow: scroll;
            font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            font-style: normal;
            font-size: 13px;
            text-decoration: none;
            color: #000000;
        }
        .checkbox_btn{
            left:214px;
        }
        #query{

            width: 52px;
            height: 24px;
            font-family: 'Arial Normal', 'Arial';
            font-style: normal;
            font-size: 13px;
            color: #fff;
            background: #2b7edf url(../../img/taisousuo.png) no-repeat 12px 5px;
            border: none;
            padding-left: 20px;
            border-radius: 5px;
            display: inline-block;
            text-align: center;
            line-height: 24px;
            cursor:pointer;
        }
        #back{
            width: 52px;
            height: 24px;
            font-family: 'Arial Normal', 'Arial';
            font-style: normal;
            font-size: 13px;
            color: #fff;
            background: #2b7edf ;
            border: none;
            border-radius: 5px;
            display: inline-block;
            text-align: center;
            line-height: 24px;
            cursor:pointer;
        }
       #content,#content ul{
           width:100%;
           overflow: hidden;
       }
        .lis li{
            width:30%;
            margin: 1% 1.6%;
            border-top:3px solid #2b7fe0;
            float: left;
            height:400px;
            background: #fff;
            box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        }
        .topCon{
            background: #e8f4fc;
            width:100%;
            height:30px;
            line-height: 30px;
        }
        .pies{
            width:100%;
            height:350px;
        }
        .topCon span{
            font-size: 11pt;
            color: #333;
            padding-left:10px;
        }
        #container td:nth-child(1),#container td:nth-child(14){
            text-overflow: clip;
            white-space: normal;
            line-height: 20px;
            word-wrap: break-word;
        }

    </style>
</head>
<body>
<div class="head w">
    <ul class="index_head">
        <%--<li data-num="0"><span class="headli1_1 " id="waitwork">预算执行报表</span><img class="headli1_2" src="../../img/twoth.png" alt="">--%>
        <%--</li>--%>
        <%--<li data-num="1"><span class="headli2_1 endWork" id="endWork">年度预算执行报表</span><img src="../../img/twoth.png" alt="" class="headli2_2">--%>
        <%--</li>--%>
        <%--<li data-num="2"><span class="headli2_1 endWork" id="tongji">预算执行报表统计</span><img src="../../img/twoth.png" alt="" class="headli2_2">--%>
        <%--</li>--%>
        <li data-num="3"><span class="headli3" id="yusuan">项目预算统计</span><img src="../../img/twoth.png" alt="" class="headli2_2"></li>
        <li data-num="4"><span class="headli3 one" id="mingxi">项目明细统计</span><img src="../../img/twoth.png" alt="" class="headli2_2"></li>
    </ul>
</div>
<div class="clearfix">
    <div class="div_Img">
        <img src="/img/yszxbb.png" style="margin-top: 25px;margin-left: 15px;vertical-align: middle;" alt="菜单主分类设置">
    </div>
    <p class="p1">项目明细报表</p>
</div>
<div class="nav" style="margin-left: 203px; margin-top: -51px;">
    <span>项目名称：</span>
    <div style="display:inline-block;position: relative" id="choose" >
        <input id="chooseItem" placeholder="请选择项目名称" type="text" value=""/>
        <span class="sj"></span>
        <div id="ulList" class="ax_default text_field">
        </div>
        <div class="checkbox_btn">
            <div class="btn"><span id="confirm_btn">确定</span><span id="cancel_btn">取消</span></div>
        </div>
    </div>
    <label for="">
        <span>所属部门：</span>
        <select name="" id="deptName" style="width: 100px;
    height: 28px;
    border-radius: 3px;"></select>
    </label>
    <label for="">
        <span>项目执行人：</span>
        <input id="user" placeholder="" type="text" value="" readonly="readonly" style="width: 100px;
    height: 28px;
    border-radius: 3px;">
        <a href="javascript:;" class="add4" style="color:rgb(43, 127, 224);text-decoration: none">添加</a>
        <a href="javascript:;"  class="clear" style="color:rgb(43, 127, 224);text-decoration: none">清空</a>
    </label>
    <span id="query">查询</span>
    <span id="back" style="display: none;">返回</span>
</div>
<div id="specialwz" style="    text-align: left;
    line-height: 28px;">

</div>
<div id="content">
    <ul class="lis">
        <%--<li>--%>
            <%--<div class="topCon"><span>邮件</span></div>--%>
            <%--<div id="container1" class="pies">--%>

            <%--</div>--%>
        <%--</li>--%>
        <%--<li>--%>
            <%--<div class="topCon"></div>--%>
            <%--<div id="container2" class="pies">--%>

            <%--</div>--%>
        <%--</li>--%>
        <%--<li>--%>
            <%--<div class="topCon"></div>--%>
            <%--<div id="container3" class="pies">--%>

            <%--</div>--%>
        <%--</li>--%>
    </ul>
</div>
<div id="container" style="display: none">
    <table>
        <thead>
        <tr>
            <th style="width: 120px;">项目名称</th>
            <th>项目申请时间</th>
            <th>项目申请人</th>
            <th>项目申请部门</th>
            <th>预算总金额</th>
            <th>额度号</th>
            <th>预算周期</th>
            <th>项目执行人</th>
            <th>项目负责人</th>
            <th>支出金额</th>
            <th>可用金额</th>
            <th>预支出金额</th>
            <th>支出百分比</th>
            <th>审批状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody class="list">

        </tbody>
    </table>
</div>



</body>
<script>
    $.ajax({
        type:'get',
        url:'/department/getChDeptfq?deptId=0',
        dataType:'json',
        success:function(res){
            var str1='';
            var arr = res.obj;
            if(res){
                str1 = '<option value="">请选择</option>'
                for (var i = 0; i < arr.length; i++) {
                    var item = arr[i];
                    str1 += '<option value="'+undefindData(item.deptId)+'">' + undefindData(item.deptName) + '</option>'
                }
                $('#deptName').html(str1)
            }

        }
    })
    $('.add4').click(function(){
        user_id='user';
        $.popWindow("../../common/selectUser?0");
    })
    $('.clear').click(function () {
        $('#user').attr("userName", "");
        $('#user').attr("user_id", "");
        $('#user').val("");
    });
    $('.index_head li').click(function(){
        var datanums = $(this).attr('data-num');
        $(this).find('span').addClass('one').parent().siblings().find('span').removeClass('one');
        if (datanums == 0) {
            window.location.href = '/budget/viewReport';
        } else if (datanums == 1) {
            window.location.href = '/budget/yearViewReport';
        } else if (datanums == 2) {
            window.location.href = '/budget/reportStatistics';
        } else if (datanums ==3) {
            window.location.href = '/budget/budgetaryStatistics';
        }else if (datanums ==4) {
            window.location.href = '/budget/detailStatistics';
        }
    });
    <%--获取项目名称--%>
    //获取所有部门
    var checkboxs = '';
    var checkbox = '';
    $.ajax({
        type: 'get',
        url: '/budget/selAllBudget',
        dataType: 'json',
        success: function (res) {
            if (res.flag) {

                $.each(res.obj, function (index, item) {
                    checkboxs =
                        checkbox += '<p><label class="u672_txt"><input type="checkbox" lineNo="'+item.lineNo+'" name="projectname" id="'+item.budgetId+'" value=\'' + item.budgetItemName + '\'>' +item.lineNo +'--' + item.budgetItemName + '</label></p>'
                })

                $('#ulList').append(checkboxs)
            }
        },
        error: function () {

        },
        complete: function () {

        }
    });

    //点击显示部门选择
    $('#choose').on('click', function () {
        $('#ulList').show();
        $('.checkbox_btn').show();
    });
    //点击确认时获取选中复选框的value
    $('#confirm_btn').on('click', function (e) {
        e.stopPropagation();
        var obj = document.getElementsByName('projectname');
        var s = '';
        var id=""
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked){
                s += obj[i].value + ',';
                id += $(obj[i]).attr('id')+','
            }
        }
        $('#chooseItem').val(s);
        $('#chooseItem').attr('typeId',id);

        $('#ulList').hide();
        $('.checkbox_btn').hide();

    });

    $('#cancel_btn').on('click', function (e) {
        e.stopPropagation();
        $('#ulList').hide();
        $('.checkbox_btn').hide();
    })
    function undefindData(data) {
        if (data == undefined) {
            return '';
        } else {
            return data;
        }
    }
    function undefinedNum(name){
        if(name == undefined || isNaN(name)){
            return 0
        }else{
            return name
        }
    }
    function pie(id,arr3,arr7,arr2,arr4){
        // Build the chart
        Highcharts.chart(id, {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            credits: {
                enabled: false
            },
            title: {
                text: ''
            },
            tooltip: {
                headerFormat: '<span style="font-size:12px">{point.key}:{point.y}</span><br/>',
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
//                pointFormatter:function(){
//                    console.log(this)
//
//                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true
                    },
                    showInLegend: true
                }
            },
            series: [{
                name:arr4,
                colorByPoint: true,
                data: [
                    // {y:arr1, name:'预算金额',color: '#54c7fc'},
                    {y:arr3, name:'可用金额',color: '#ff7466'},
                    {y:arr7, name:'预支出金额',color: 'pink'},
                    {y:arr2, name:'支出金额',color: '#ffb54d'},
                    // {y:arr6, name:'支出百分比',color: '#44db5e'}
                ],
            }]
        });
    }
//    pie()
    var datas={budgetId:""}
    function tongji(datas){
        $.ajax({
            type: 'get',
            url: '/budget/selStatistics',
            data:datas,
            dataType: 'json',
            success: function (res) {
                if(res.obj1){
//                            $('.allmony').html(res.obj1.allMoney)
//                            $('.zhichu').html(res.obj1.allPayMoney)
//                            $('.sheng').html(res.obj1.allBalance)
//                            $('.prc').html((Math.round(res.obj1.allPayMoney / res.obj1.allMoney * 10000) / 100.00 + "%"))
                    var a = new Date();
                    var b = a.getFullYear();
                    var str = '<span style="    margin-left: -145px;\n' +
                        '    display: inline-block;">概况：'+ b +'年'+function(){
                            if(res.obj1.budgetItemName == undefined){
                                return '全校'
                            }else{
                                return res.obj1.budgetItemName
                            }
                        }()+'预算金额'+  undefinedNum(res.obj1.allMoney) +'元，已支出金额'+ undefinedNum(res.obj1.allPayMoney) +'元('+undefinedNum(Math.round(res.obj1.allPayMoney/res.obj1.allMoney * 100*100)/100)+'%)，预支出金额'+undefinedNum(res.obj1.allAdvance)+'元('+undefinedNum(Math.round(res.obj1.allAdvance/res.obj1.allMoney * 100*100)/100)+'%)，可用金额'+ undefinedNum(res.obj1.allBalance) +'元('+undefinedNum(Math.round(res.obj1.allBalance/res.obj1.allMoney * 100*100)/100)+'%)';
                    $('#specialwz').html(str);
                }

                // 列表信息

                // 图标信息
                if(res.object.length>0){
                    var arr1 = [] //预算金额
                    var arr2 = [] //
                    var arr3 = []
                    var arr4 = [] //项目名
                    var arr6 = []
                    var arr5=[];
                    var arr7=[];
                    var str=""
                    for(var i=0,length=res.object.length;i<length;i++){
                        var item =  res.object[i];
                        arr1.push(parseFloat(item.itemMoney))//预算金额
                        arr2.push(parseFloat(item.actualExpenditure))//支出金额
                        arr3.push(parseFloat(item.isPayment))//可用金额
                        arr4.push(item.budgetItemName)//项目名称
                        arr5.push(item.budgetId)//项目id
                        arr6.push(undefindData((Math.round(item.actualExpenditure / item.itemMoney * 10000) / 100.00 + "%")))//支出百分比
                        arr7.push(parseFloat(item.allAdvance))//预支出金额
                    }
                    var str=""
                    for(var j=0;j<arr4.length;j++){
                        str+=' <li id="'+arr5[j]+'" style="position: relative;">\n' +
                            '            <div class="topCon"><span>'+arr4[j]+'-</span><span style="font-size:11pt;">预算金额:'+arr1[j]+'元</span></div>\n' +
                            '            <div id="container'+j+'" class="pies">\n' +

                            '            </div>\n' +
                            '<div style="position:absolute;bottom:3px;font-size: 10pt;">支出金额'+ undefinedNum(arr2[j]) +'元('+undefinedNum(Math.round(arr2[j]/arr1[j] * 100*100)/100)+'%)，预支出金额'+undefinedNum(arr7[j])+'元('+undefinedNum(Math.round(arr7[j]/arr1[j] * 100*100)/100)+'%)，可用金额'+ undefinedNum(arr3[j]) +'元('+undefinedNum(Math.round(arr3[j]/arr1[j] * 100*100)/100)+'%)</div>' +
                            '        </li>'
                    }
                    $('.lis').html(str)

                    for(var k=0;k<arr4.length;k++){
                        pie('container'+k,arr3[k],arr7[k],arr2[k],arr4[k])
                    }

                }else{
                    $('.lis').html('')
                }
            }

        })
    }
    tongji(datas)


    var ajaxPage = {
        data: {
            page: 1,//当前处于第几页
            pageSize: 5,//一页显示几条
            useFlag: true,
        },
        init: function () {
        },
        page: function () {
            var me = this;

            $.ajax({
                type: 'get',
                url: '/budget/selBudgetingProcessByItem',
                dataType: 'json',
                data: me.data,
                success: function (res) {
                    // 列表信息
                    // 图标信息
                    if(res.datas.length){
                        var str=""
                        $.each(res.datas, function (index, item) {
                            var lineNo = item.lineNo.split(',').join('')
                            str += '<tr>' +
                                '<td title="'+item.budgetItemName+'"><span style="color:rgb(43, 127, 224);cursor:pointer"  class="itemPro" style="color:rgb(43, 127, 224);text-decoration: none" id="'+item.budgetId+'">' + item.budgetItemName + '</span></td>' +
                                '<td title="'+item.applicationDate+'">' + item.applicationDate + '</td>' +
                                '<td title="'+item.createrName+'">' + item.createrName + '</td>' +
                                '<td title="'+item.deptName+'">' + item.deptName + '</td>' +
                                '<td title="'+item.itemMoney+'">' + item.itemMoney + '</td>' +
                                '<td title="'+lineNo+'">' + lineNo + '</td>' +
                                '<td title="'+item.budgetZhouQi+'">' + item.budgetZhouQi + '</td>' +
                                '<td title="'+item.itemExecuter+'">' + item.itemExecuter + '</td>' +
                                '<td title="'+item.itemManager+'">' + item.itemManager + '</td>' +
                                '<td title="'+undefindData(item.actualExpenditure)+'">' + function(){
                                    if(undefindData(item.actualExpenditure) == ""){
                                        return 0;
                                    }else{
                                        return undefindData(item.actualExpenditure);
                                    }
                                }() + '</td>' +
                                '<td title="'+ undefindData(item.isPayment)+'">' + undefindData(item.isPayment) + '</td>' +
                                '<td title="'+ undefindData(item.allAdvance)+'">' + undefindData(item.allAdvance) + '</td>' +
                                '<td title="'+ undefindData(item.baiFenBi)+'">' + function(){
                                    if(undefindData(item.baiFenBi) == ""){
                                        return '0%'
                                    }else{
                                        return undefindData(item.baiFenBi)
                                    }
                                }() + '</td>' +
                                '<td title="'+item.setpName+'">' + item.setpName + '</td>' +
                                '<td class="detail"><a href="/workflow/work/workformPreView?flowId=' + item.flowId + '&flowStep=' + item.step + '&tableName=budget&runId=' + item.runId + '&prcsId=' + item.realPrcsId + '"  target="_blank" >查看详情</a></td>' +
                                '</tr>';
                            layer.closeAll();

                        })
                        $('.list').html(str)
                        me.pageTwo(res.totleNum, me.data.pageSize, me.data.page)
                    }
                }
            })

        },
        pageTwo: function (totalData, pageSize, indexs) {
            var mes = this;
            $('#dbgz_page').pagination({
                totalData: totalData,
                showData: pageSize,
                prevContent:'上一页',
                nextContent:'下一页',
                jump: true,
                coping: true,
                homePage: '',
                endPage: '',
                current: indexs || 1,
                callback: function (index) {
                    mes.data.page = index.getCurrent();
                    mes.page();
                }
            });
        }
    }

    $('.list').on('click','.itemPro',function(){
        var id = $(this).attr('id')
        layer.open({
            type:2,
            area: ['1000px', '430px'],
            fix: false, //不固定
//                                maxmin: true,
            content: '/budget/newjournal1?budgetId='+id,
        })
    })



    $('.lis').on('click','li',function(e){
        e.stopPropagation();
        var id=$(this).attr('id');
        $('.list').html('')
        ajaxPage.data.budgetId=id;
        ajaxPage.page();
        $('#content').hide();
        $('#container').show();
        $('#back').show();

    })
    $('#back').click(function(){
        $('#content').show();
        $('#container').hide();
        $('#back').hide();
    })

//    点击查询
    $('#query').click(function(){
        var typeId = $('#chooseItem').attr('typeId');
        var userId =""
        if($('#user').val()==""){
            userId = ""
        }else{
            userId = $('#user').attr('user_id')
        }
        // ajaxPage.data.budgetId=typeId;
        // ajaxPage.page();
        datas={
            budgetIds:typeId,
            deptId : $('#deptName').val(),
            itemExecuter : userId
        }
        tongji(datas);

    })




</script>

</html>
